---
id: breadcrumbs
title: Breadcrumbs
---

import Playground from '@theme/Playground';

## Sizes

### Normal

<Playground>
  <nav aria-label="breadcrumbs">
    <ul class="breadcrumbs">
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Infima
        </a>
      </li>
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Docs
        </a>
      </li>
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Component
        </a>
      </li>
      <li class="breadcrumbs__item breadcrumbs__item--active">
        <a class="breadcrumbs__link" href="#url">
          Breadcrumb
        </a>
      </li>
    </ul>
  </nav>
</Playground>

### Small

<Playground>
  <nav aria-label="breadcrumbs">
    <ul class="breadcrumbs breadcrumbs--sm">
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Infima
        </a>
      </li>
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Docs
        </a>
      </li>
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Component
        </a>
      </li>
      <li class="breadcrumbs__item breadcrumbs__item--active">
        <a class="breadcrumbs__link" href="#url">
          Breadcrumb
        </a>
      </li>
    </ul>
  </nav>
</Playground>

### Large

<Playground>
  <nav aria-label="breadcrumbs">
    <ul class="breadcrumbs breadcrumbs--lg">
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Infima
        </a>
      </li>
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Docs
        </a>
      </li>
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#url">
          Component
        </a>
      </li>
      <li class="breadcrumbs__item breadcrumbs__item--active">
        <a class="breadcrumbs__link" href="#url">
          Breadcrumb
        </a>
      </li>
    </ul>
  </nav>
</Playground>
